<@override name="content">
<div class="pagination pagination-centered">
  <div class="pull-left">
    <form class="form-search" action="user/search" method="post">
      <div class="input-append">
        <input type="text" class="input-medium search-query" name="word" placeholder="Search user" autofocus>
        <button type="submit" class="btn btn-info">Search</button>
      </div>
    </form>
  </div>
  <#include "../common/_paginate.html" />
  <#if userList.pageSize!=pageSize>
    <@paginate currentPage=userList.pageNumber totalPage=userList.totalPage actionUrl="rank/" urlParas="?pageSize=${userList.pageSize}" />
  <#else>
    <@paginate currentPage=userList.pageNumber totalPage=userList.totalPage actionUrl="rank/" />
  </#if>
  <div class="pull-right">
    <span class="badge badge-info">${userList.pageNumber}/${userList.totalPage} Pages</span> <span
          class="badge badge-info">${userList.totalRow} Users</span>
  </div>
</div>

<table id="user-rank" class="table table-hover table-condensed">
  <thead>
  <tr>
    <th>Rank</th>
    <#if adminUser??>
      <th>UID</th>
    </#if>
    <th>User</th>
    <th>Nick Name</th>
    <#if adminUser??>
      <th>Real Name</th>
    </#if>
    <th>Solved</th>
    <th>Submit</th>
    <th>Ratio</th>
  </tr>
  </thead>
  <tbody>
    <#if userList??> <#list userList.list as User>
    <tr>
      <td>${User.rk!}</td>
      <#if adminUser??>
      <td>${User.uid!}</td>
      </#if>
      <td class="user"><a href="user/profile/${User.name!}" class="user"
                          <#if adminUser?? && User.realName??>data-toggle="tooltip"
                          title="${(User.realName)!}"</#if>>${User.name!}</a></td>
      <td>${User.nick!}</td>
      <#if adminUser??>
        <td>${User.realName!}</td>
      </#if>
      <td><a href="status?name=${User.name!}&result=0">${User.solved!}</a></td>
      <td><a href="status?name=${User.name!}">${User.submission!}</a></td>
      <td><#if (User.submission>0)>${(User.solved/User.submission*100)?int}<#else>0</#if>%</td>
    </tr>
    </#list> </#if>
  </tbody>
</table>
</@override>

<@override name="scripts">
<link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    var prevpage = "/rank/${userList.pageNumber-1}<#if userList.pageSize!=pageSize>?pageSize=${userList.pageSize}</#if>"
    var nextpage = "/rank/${userList.pageNumber+1}<#if userList.pageSize!=pageSize>?pageSize=${userList.pageSize}</#if>"
    $(document).keydown(function (event) {
        <#if (userList.pageNumber>1)>if (event.keyCode == 37)location = prevpage;</#if>
        <#if userList.pageNumber<userList.totalPage>if (event.keyCode == 39)location = nextpage;</#if>
    });

    <#if oj_style != "slate">
      $("#user-rank").tablecloth({
        theme: "stats",
        condensed: true,
        sortable: true,
        striped: true,
        clean: true
      });
    </#if>
  });
</script>
</@override>
<@extends name="../common/_layout.html" />
